import React, {useState} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {Colors, View, Text, Button, Spacings} from 'react-native-ui-lib';
import {TestSuite, TestCase} from '@rnoh/testerino';

export default function ColorDemo() {
  const [loadedCustomColors, setLoadedCustomColors] = useState(false);
  const [currentScheme, setCurrentScheme] = useState<'light' | 'dark'>('light');

  const handleLoadColors = () => {
    Colors.loadColors({
      myCustomPink: '#FF69B4',
      myCustomCyan: '#00FFFF',
    });
    setLoadedCustomColors(true);
  };

  const handleLoadSchemes = () => {
    Colors.loadSchemes({
      light: {
        screenBG: Colors.white,
        textColor: Colors.black,
        boxColor: Colors.grey60,
      },
      dark: {
        screenBG: Colors.grey10,
        textColor: Colors.white,
        boxColor: Colors.grey30,
      },
    });
  };

  const toggleScheme = () => {
    const newScheme = currentScheme === 'light' ? 'dark' : 'light';
    Colors.setScheme(newScheme);
    setCurrentScheme(newScheme);
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <TestSuite name="Colors API">
        
        <TestCase itShould="loadColors: 加载并使用自定义颜色 (myCustomPink, myCustomCyan)">
          <View style={styles.section}>
            <Button
              label="Load Custom Colors"
              size={Button.sizes.xSmall}
              onPress={handleLoadColors}
              marginB-10
            />
            <View row spread>
              <View center style={[styles.colorBox, {backgroundColor: loadedCustomColors ? Colors.myCustomPink : Colors.grey70}]}>
                <Text text90 black>Pink</Text>
                <Text text100 black>{loadedCustomColors ? '#FF69B4' : 'Unloaded'}</Text>
              </View>
              <View center style={[styles.colorBox, {backgroundColor: loadedCustomColors ? Colors.myCustomCyan : Colors.grey70}]}>
                <Text text90 black>Cyan</Text>
                <Text text100 black>{loadedCustomColors ? '#00FFFF' : 'Unloaded'}</Text>
              </View>
            </View>
          </View>
        </TestCase>

        <TestCase itShould="loadSchemes: 加载方案并切换 (Light/Dark)">
          <View style={styles.section}>
            <Button
              label="Init Schemes"
              size={Button.sizes.xSmall}
              onPress={handleLoadSchemes}
              marginB-10
            />
            <Button
              label={`Toggle Scheme (Current: ${currentScheme})`}
              size={Button.sizes.xSmall}
              outline
              onPress={toggleScheme}
              marginB-10
            />
            <View 
              padding-10 
              style={{
                backgroundColor: Colors.screenBG || Colors.grey70, 
                borderWidth: 1, 
                borderColor: Colors.grey50
              }}
            >
              <Text style={{color: Colors.textColor || Colors.black}} text70>
                This text and background changes with scheme.
              </Text>
              <View 
                marginT-10 
                style={{
                  width: 50, 
                  height: 50, 
                  backgroundColor: Colors.boxColor || Colors.grey60
                }} 
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="rgba: 生成带透明度的颜色字符串">
          <View row spread style={styles.section}>
            <View center style={[styles.colorBox, {backgroundColor: Colors.blue30}]}>
              <Text white text90>Original</Text>
              <Text white text100>{Colors.blue30}</Text>
            </View>

            <View center style={[styles.colorBox, {backgroundColor: Colors.rgba(Colors.blue30, 0.6)}]}>
              <Text white text90>Alpha 0.6</Text>
              <Text white text100 center style={{fontSize: 10}}>
                {Colors.rgba(Colors.blue30, 0.6)}
              </Text>
            </View>

            <View center style={[styles.colorBox, {backgroundColor: Colors.rgba(Colors.blue30, 0.2)}]}>
              <Text black text90>Alpha 0.2</Text>
              <Text black text100 center style={{fontSize: 10}}>
                {Colors.rgba(Colors.blue30, 0.2)}
              </Text>
            </View>
          </View>
        </TestCase>

        <TestCase itShould="getColorTint: 获取颜色的特定色调 (Based on standard palettes)">
          <View style={styles.section}>
            <Text marginB-5 black>Base: Colors.blue30</Text>
            <View row spread>
              <View center style={[styles.colorBox, {backgroundColor: Colors.getColorTint(Colors.blue30, 10)}]}>
                <Text white text90>Tint 10</Text>
                <Text white text100>(Darker)</Text>
              </View>
              <View center style={[styles.colorBox, {backgroundColor: Colors.blue30}]}>
                <Text white text90>Base 30</Text>
              </View>
              <View center style={[styles.colorBox, {backgroundColor: Colors.getColorTint(Colors.blue30, 60)}]}>
                <Text black text90>Tint 60</Text>
                <Text black text100>(Lighter)</Text>
              </View>
            </View>
          </View>
        </TestCase>

        <TestCase itShould="isDark: 判断颜色是否为深色">
          <View style={styles.section}>
            {['#000000', '#FFFFFF', Colors.yellow30, Colors.violet30].map((color, index) => {
              const isDark = Colors.isDark(color);
              return (
                <View key={index} row centerV marginB-5 padding-5 style={{backgroundColor: Colors.grey80, borderRadius: 4}}>
                   <View style={{width: 30, height: 30, backgroundColor: color, marginRight: 10, borderWidth: 1, borderColor: Colors.grey60}} />
                   <Text text80 black style={{flex: 1}}>{color}</Text>
                   <Text text80 style={{color: isDark ? Colors.green30 : Colors.red30, fontWeight: 'bold'}}>
                     {isDark ? 'IS DARK' : 'IS LIGHT'}
                   </Text>
                </View>
              );
            })}
          </View>
        </TestCase>

      </TestSuite>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: Colors.black, 
  },
  section: {
    padding: 10,
    backgroundColor: Colors.white,
    borderRadius: 8,
  },
  colorBox: {
    width: 80,
    height: 80,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: Colors.grey60,
  },
});